<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Gramedia Writing Project</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

	<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
	<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
	<!--script src="js/less-1.3.3.min.js"></script-->
	<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
	
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">
    <link href="css/tooltip.css" rel="stylesheet">

  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
  <![endif]-->

  <!-- Fav and touch icons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
  <link rel="shortcut icon" href="img/icon.png">
  
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/scripts.js"></script>
    
</head>

<body id="body">
<div class="container shadow">
	<div class="row clearfix">
		<div class="col-md-12 column"><!-- untuk iklan di atas header -->
        	<img src="img/1bfdf7e9746c4dd82708fac53e91967e.jpg" style="width:100%; height:50px;"/>
		</div>
	</div>
	<div class="row clearfix colorheader"><!-- untuk menu -->
		<div class="col-md-2 column logo">
			<img src="img/Logo GRP.jpg" />
		</div>
        <div class="col-md-10 column padd3" style="padding-right:14px;">
        	<nav class="navbar navbar-default navbar-static-top navbar-inverse header" role="navigation">
				<div class="navbar-header">
					 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
				</div>
				
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li>
							<a href="index2.html">Discover</a>
						</li>
                        <li>
							<a href="#">Event</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Panduan<strong class="caret"></strong></a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">Action</a>
								</li>
                                <li>
									<a href="#">Another action</a>
								</li>
                                <li>
									<a href="#">Something else here</a>
								</li>
								<li>
									<a href="#">Separated link</a>
								</li>
								<li>
									<a href="#">One more separated link</a>
								</li>
							</ul>
						</li>
					</ul>
					<form class="navbar-form navbar-left" role="search">
						<div class="form-group">
							<input class="form-control tinggitextbox" type="text">
						</div> <button type="submit" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-search"></span></button>
					</form>
					<ul class="nav navbar-nav navbar-right">
						<li>
							<a href="tulis cerita.html">Tulis Cerita</a>
						</li>
						<li class="dropdown">
							 <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;Jessyca<strong class="caret"></strong></a>
							<ul class="dropdown-menu">
								<li>
									<a href="profilku.html"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;Profil</a>
								</li>
								<li>
									<a href="daftar cerita.html"><span class="glyphicon glyphicon-list"></span>&nbsp;&nbsp;Daftar Cerita</a>
								</li>
								<li>
									<a href="draft cerita.html"><span class="glyphicon glyphicon-edit"></span>&nbsp;&nbsp;Draft Cerita</a>
								</li>
								<li>
									<a href="koleksiku.html"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;Koleksiku</a>
								</li>
                                <li>
									<a href="#"><span class="glyphicon glyphicon-log-out"></span>&nbsp;&nbsp;Logout</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</nav>
		</div>
	</div>
    
    <!-- start untuk content -->
	<div class="row clearfix">
    <div class="col-md-12 column content">
	<div class="row clearfix">
		<div class="col-md-3 column" ><!-- untuk kolom pertama -->
        	<div class="panel-group" id="panel-661231">
				<div class="panel panel-default padd4">
					<div class="hr3">
                    <span class="glyphicon glyphicon-bookmark"></span>
                      Profil
                    </div>
                    <hr class="hr2"/>
                    <img src="img/foto suri.jpg"  class="img-thumbnail fotoprofil2">
                    <br/>
                    <br/>
				</div>		
			</div>
            
            
            
            <br/>
            
            	<div class="hr3">
				 <span class="glyphicon glyphicon-tags"></span>&nbsp;&nbsp;Kegiatanku
                </div>
				<div class="list-group-item" style="border-left:none; border-right:none;">
					<span class="badge"></span><span class="glyphicon glyphicon-pencil"></span><a href="tulis cerita.html">&nbsp;&nbsp;Tulis Cerita</a>
				</div> 
                <div class="list-group-item" style="border-left:none; border-right:none;">
					<span class="badge"></span><span class="glyphicon glyphicon-envelope"></span><a href="tulis message.html">&nbsp;&nbsp;Kirim Pesan</a>
				</div> 
                 
				<br/>
                <div class="hr3">
                    <span class="glyphicon glyphicon-book"></span>&nbsp;&nbsp;Lokerku 
                </div>
                <div class="list-group-item" style="border-left:none; border-right:none;">
                    <span class="badge">14 post</span><a href="daftar cerita.html">&nbsp;&nbsp;Daftar Cerita</a>
                </div>
                <div class="list-group-item" style="border-left:none; border-right:none;">
                    <span class="badge">14 post</span><a href="koleksiku.html">&nbsp;&nbsp;Koleksiku</a>
                </div> 
		</div>
        
		<div class="col-md-9 column" > <!-- untuk kolom kedua yang dibagi 2 -->
			<div class="row clearfix">
				<div class="col-md-12 column">
                	<div class="box box-primary" style="padding:10px;">
                        <h8 class="judulprofil">Daftar Draft Cerita</h8>
                        <hr class="hr2">
                        <!-- start daftar cerita -->
                        <div class="row">
                            <div class="col-md-2"><img src="img/blank.jpg"  class="img-thumbnail fotoprofil"></div>
                            <div class="col-md-9 maxsize">
                                <table style="width:100%">
                                <tr>
                                <td style="width:85%">
                                <h8>
                                    Perang dunia
                                </h8>
                                <br/>
                                <!--<span class="glyphicon glyphicon glyphicon-time"></span><a class="font2">&nbsp;May 6th, 2014&nbsp;&nbsp;</a>-->
                                <span class="glyphicon glyphicon glyphicon-tags"></span><a class="font2">&nbsp;Tutorial, Web Design&nbsp;&nbsp;</a>
                                <div class="font10 abu">create 4 jan'14 | update 4 Juni'14</div>
                                </td>
                                <td></td>
                                </tr>
                                </table>
                                <hr/>
                                <p>
                                    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
                                </p>
                                <p>
                                	<a class="btn" href="tulis cerita.html">Edit</a>
                                    <a class="btn" href="tulis cerita.html">Publish</a>
                                    <a class="btn" href="cerita.html">Selengkapnya »</a>
                                </p>
                            </div>
                        </div>
                        <hr/>
                        <div class="row">
                            <div class="col-md-2"><img src="img/Koala.jpg"  class="img-thumbnail fotoprofil"></div>
                            <div class="col-md-9 maxsize">
                                <table style="width:100%">
                                <tr>
                                <td style="width:85%">
                                <h8>
                                    Perang dunia
                                </h8>
                                <br/>
                                <!--<span class="glyphicon glyphicon glyphicon-time"></span><a class="font2">&nbsp;May 6th, 2014&nbsp;&nbsp;</a>-->
                                <span class="glyphicon glyphicon glyphicon-tags"></span><a class="font2">&nbsp;Tutorial, Web Design&nbsp;&nbsp;</a>
                                <div class="font10 abu">create 4 jan'14 | update 4 Juni'14</div>
                                </td>
                                <td></td>
                                </tr>
                                </table>
                                <hr/>
                                <p>
                                    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
                                </p>
                                <p>
                                	<a class="btn" href="tulis cerita.html">Edit</a>
                                    <a class="btn" href="tulis cerita.html">Publish</a>
                                    <a class="btn" href="cerita.html">Selengkapnya »</a>
                                </p>
                            </div>
                        </div>
                        <hr/>
                        <div class="row">
                            <div class="col-md-2"><img src="img/Koala.jpg"  class="img-thumbnail fotoprofil"></div>
                            <div class="col-md-9 maxsize">
                                <table style="width:100%">
                                <tr>
                                <td style="width:85%">
                                <h8>
                                    Perang dunia
                                </h8>
                                <br/>
                                <!--<span class="glyphicon glyphicon glyphicon-time"></span><a class="font2">&nbsp;May 6th, 2014&nbsp;&nbsp;</a>-->
                                <span class="glyphicon glyphicon glyphicon-tags"></span><a class="font2">&nbsp;Tutorial, Web Design&nbsp;&nbsp;</a>
                                <div class="font10 abu">create 4 jan'14 | update 4 Juni'14</div>
                                </td>
                                <td></td>
                                </tr>
                                </table>
                                <hr/>
                                <p>
                                    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
                                </p>
                                <p>
                                	<a class="btn" href="tulis cerita.html">Edit</a>
                                    <a class="btn" href="tulis cerita.html">Publish</a>
                                    <a class="btn" href="cerita.html">Selengkapnya »</a>
                                </p>
                            </div>
                        </div>
                        <hr/>
                        <div class="row">
                            <div class="col-md-2"><img src="img/Koala.jpg"  class="img-thumbnail fotoprofil"></div>
                            <div class="col-md-9 maxsize">
                                <table style="width:100%">
                                <tr>
                                <td style="width:85%">
                                <h8>
                                    Perang dunia
                                </h8>
                                <br/>
                                <!--<span class="glyphicon glyphicon glyphicon-time"></span><a class="font2">&nbsp;May 6th, 2014&nbsp;&nbsp;</a>-->
                                <span class="glyphicon glyphicon glyphicon-tags"></span><a class="font2">&nbsp;Tutorial, Web Design&nbsp;&nbsp;</a>
                                <div class="font10 abu">create 4 jan'14 | update 4 Juni'14</div>
                                </td>
                                <td></td>
                                </tr>
                                </table>
                                <hr/>
                                <p>
                                    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
                                </p>
                                <p>
                                	<a class="btn" href="tulis cerita.html">Edit</a>
                                    <a class="btn" href="tulis cerita.html">Publish</a>
                                    <a class="btn" href="cerita.html">Selengkapnya »</a>
                                </p>
                            </div>
                        </div>
                        <hr/>
                        <div class="row">
                            <div class="col-md-2"><img src="img/Koala.jpg"  class="img-thumbnail fotoprofil"></div>
                            <div class="col-md-9 maxsize">
                                <table style="width:100%">
                                <tr>
                                <td style="width:85%">
                                <h8>
                                    Perang dunia
                                </h8>
                                <br/>
                                <!--<span class="glyphicon glyphicon glyphicon-time"></span><a class="font2">&nbsp;May 6th, 2014&nbsp;&nbsp;</a>-->
                                <span class="glyphicon glyphicon glyphicon-tags"></span><a class="font2">&nbsp;Tutorial, Web Design&nbsp;&nbsp;</a>
                                <div class="font10 abu">create 4 jan'14 | update 4 Juni'14</div>
                                </td>
                                <td></td>
                                </tr>
                                </table>
                                <hr/>
                                <p>
                                    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
                                </p>
                                <p>
                                	<a class="btn" href="tulis cerita.html">Edit</a>
                                    <a class="btn" href="tulis cerita.html">Publish</a>
                                    <a class="btn" href="cerita.html">Selengkapnya »</a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <br/>
                    <ul class="pagination pagination-sm">
                        <li>
                            <a href="#">Prev</a>
                        </li>
                        <li>
                            <a href="#">1</a>
                        </li>
                        <li>
                            <a href="#">2</a>
                        </li>
                        <li>
                            <a href="#">3</a>
                        </li>
                        <li>
                            <a href="#">4</a>
                        </li>
                        <li>
                            <a href="#">5</a>
                        </li>
                        <li>
                            <a href="#">Next</a>
                        </li>
                    </ul>
        
                    </div>
                        <!-- stop daftar cerita -->
                    </div>
                </div>
            </div>
		</div>
    </div>
	<!-- end untuk content -->
	
    <!-- untuk iklan -->
	<div class="row clearfix">
		<div class="col-md-12 column">
		</div>
	</div>
    
    <!-- untuk footer -->
    <br/>
	<div class="row clearfix">
		<div class="col-md-12 column" style="min-height:60px; background-color:#333333; padding-top:10px; font-size:12px">
        	<table style="width:100%; color:#CCCCCC; padding-top:15px; padding-bottom:15px;">
            	<tr>
                	<td>Copyright @Gramedia 2014</td>
                    <td style="border-left:thin solid #919191; width:20%; padding-right:70px;"><strong>&nbsp;&nbsp;&nbsp;&nbsp;Join Us :</strong><br/>
                    	<div class="col-md-3"><img src="img/facebook-icon.png" /></div>
                        <div class="col-md-3"><img src="img/google-plus-icon.png" /></div>
                        <div class="col-md-3"><img src="img/twitter-icon.png" /></div>
                        <div class="col-md-3"><img src="img/blogger-icon.png" /></div>
                    </td>
                </tr>
            </table>
            <br/>
		</div>
	</div>
</div>
</div> 
</body>
</html>
